<template>
    <div class="max-w-2xl mx-auto mb-8">
        <a-input-search
            v-model:value="keyword"
            placeholder="搜索音乐、歌手、歌词"
            size="large"
            class="[&_.ant-input]:rounded-full [&_.ant-input]:border-gray-300 [&_.ant-input:hover]:border-blue-500 [&_.ant-input:focus]:border-blue-500 [&_.ant-input-search-button]:rounded-r-full [&_.ant-input-search-button]:bg-blue-500 [&_.ant-input-search-button]:border-blue-500 [&_.ant-input-search-button:hover]:bg-blue-600"
            @search="handleSearch"
        >
            <template #prefix>
                <SearchOutlined />
            </template>
        </a-input-search>
    </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { SearchOutlined } from '@ant-design/icons-vue'

// Props
defineProps<{
    modelValue?: string
}>()

// Emits
const emit = defineEmits<{
    (e: 'update:modelValue', value: string): void
    (e: 'search', value: string): void
}>()

// Data
const keyword = ref('')

// Methods
const handleSearch = (value: string) => {
    emit('update:modelValue', value)
    emit('search', value)
}
</script>
